<template>
    <div class="model" v-if="model">
      <div class="title">{{model.title}}</div>
      <div class="detail" v-for="(item, index) in model.content" :key="index">
          <image v-if="item.image" :src="item.image + '?imageMogr2/auto-orient/thumbnail/640x/quality/75'" mode="widthFix"/>
          <rich-text v-if="item.text" class="text" :nodes="item.text"></rich-text>
      </div>
      <div class="back" @click="toHome">
        <div class="title"> 返回首页</div>
      </div>
    <van-toast id="van-toast"/>
    </div>
</template>

<script>
import * as HelpAction from '@/api/helper'
import * as Utils from '@/utils'
import { mapState } from 'vuex'
import Toast from 'vant-weapp/dist/toast/toast'

export default {
  data () {
    return {
      model: null
    }
  },
  computed: {
    ...mapState(['me'])
  },
  onLoad (query) {
    wx.showNavigationBarLoading()
    this.model = null
    // scene存在,则优先判断
    if (query.scene) {
      let params = Utils.default.parseQuery(decodeURIComponent(query.scene))
      if (params.id) this.fetchModel(params.id)
      if (params.ic && params.ic.length === 6) wx.setStorageSync('__inviteCode', params.ic)
      return
    }
    if (query.code) wx.setStorageSync('__inviteCode', query.code)
    if (query.id) this.fetchModel()
  },
  onShareAppMessage (res) {
    return {
      title: this.shareTitle(),
      imageUrl: this.model.cover,
      path: this.sharePath()
    }
  },
  onPullDownRefresh () {
    wx.showNavigationBarLoading()
    this.fetchModel()
    wx.stopPullDownRefresh()
  },
  methods: {
    toHome () {
      wx.switchTab({ url: '/pages/home/zy' })
    },
    shareTitle () {
      if (!this.me) return `${this.title}`
      if (this.me) return `${this.me.nickname}向您推荐了${this.model.title}`
    },
    sharePath () {
      let url = 'pages/help/detail?id=' + this.model.id
      let code = ''
      if (this.me && this.me.invite_code) {
        code = this.me.invite_code
        url = url + '&code=' + code
      }
      return url
    },
    fetchModel () {
      HelpAction.show(this.$root.$mp.query.id)
        .then(data => {
          this.model = data
          this.model.time = Utils.default.getDateDiffCountdown(this.model.created_at)
          wx.hideNavigationBarLoading()
        })
        .catch(err => {
          wx.hideNavigationBarLoading()
          Toast(err.msg)
        })
    }
  }
}
</script>

<style lang="less" scoped>
  .back {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    color: #6A6A6A;
    background: #FAFAFA;
    text-align: center;
    padding:30rpx 0;
    font-size: 28rpx;
    .like {
      display: inline-block;
      padding: 0;
    }
     .like-icon {
      vertical-align:middle;
      font-size:15px;
    }
    .item {
      flex: 1;
      text-align: center;
    }
  }
.model {
  padding: 15px;
  position: relative;
  padding-bottom: 120rpx;
  .title {
    font-weight: 500;
    margin-bottom: 30rpx;
  }
  .detail {
      .text {
      color: #666;
      display: block;
      font-size: 15px;
      letter-spacing: 1px;
      font-weight: 300;
      line-height: 1.6em;
      margin: 15px 0;
      }
    image {
      width: 100%;
    }
  }

}
</style>
